<template>
	<page-container bgColor="#f4f4f4">
		<cu-custom slot="header" :isBack="true" bgColor="bg-white">
			<block slot="content">直播预告</block>
		</cu-custom>
		<view slot="center" class="auto-100">
			<mescroll ref="mescrollRef" @init="mescrollInit" height="100%" :down="downOption" @down="downCallback"
				:up="upOption" @up="upCallback">
				<view class="order-row" :class="bottomType ? 'ativer-bottom' : ''">
					<view class="order-row-item animation-slide-bottom" :style="{ animationDuration: 0.6 + 's' }" v-for="(item,index) in liveList" :key="index" @click="toygdetails(item)">
						<view class="order-row-top df-cen-rl">
							<view class="df-ai-cen">
								<text class="cuIcon-shop" style="font-size: 28rpx;margin-top: 5rpx;"></text>
								<view class="site-name">{{item.site_name || item.name}}</view>
							</view>
						</view>
						<view class="df margin-top">
							<image :src="item.image" mode="" class="item-img"></image>
							<view class="df order-info-right">
								<view class="order-info-title">
									<view class="zbjtitle">{{item.title}}</view>
									<view class="zbjkbtime">开播时间：{{item.starttime}}</view>
									<view class="zbjjstime">结束时间：{{item.endtime}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll>
		</view>
	</page-container>
</template>
<script>
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js'
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin],
	data() {
		return {
			mescroll: null,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				}
			},
			liveList: [], // 列表数据
			pageNum: 0,
			pageSize: 10
		}
	},
	computed: {
		bottomType() {
			let newType = false
			newType = this.pageNum * this.pageSize > this.liveList.length
			return newType
		}
	},
	methods: {
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
		},
		/* 下拉刷新的回调 */
		downCallback(e) {
			this.mescroll.resetUpScroll()
		},
		/* 上拉加载的回调 */
		upCallback(page) {
			this.getNoticeList(page.num, this.pageSize)
		},
		toygdetails(item) {
			// this.$Router.push({
			// 	path: '/livePages/live/live-preview-details',
			// 	query: {
			// 		live_id: item.id
			// 	}
			// })
			this.$util.redirectTo('/livePages/live/live-preview-details',{live_id: item.id})
		},
		getNoticeList(page, page_size) {
			this.$request.getNoticeList({
				page_index: page,
				page_size
			}).then(res => {
				this.mescroll.endSuccess(res.data.list.length)
				this.pageNum = page
				if (page == 1) {
					this.liveList = []
					this.liveList = res.data.list
				} else {
					this.liveList = this.liveList.concat(res.data.list)
				}
			})
		}
	}
}
</script>
<style scoped lang="scss">
	/deep/.mescroll-uni {
		height: 100% !important;
	}

	.order-row {
		padding: 20rpx 20rpx 0 20rpx;

		.order-row-item {
			width: 100%;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
			background-color: #ffffff;
			border-radius: 20rpx;

			.item-img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 20rpx;
			}

			.item-info-title {
				margin-bottom: 20rpx;
			}

			.site-name {
				margin: 0 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
			}
		}

		.order-info-right {
			margin-left: 30rpx;
			flex: 1;
			align-items: center;
			justify-content: flex-start;

			.order-info-title {
				width: 460rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.info-price {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
			}
		}

		.order-type {
			padding-top: 10rpx;
		}
	}

	.ativer-bottom {
		/* #ifdef MP-WEIXIN */
		padding-bottom: 100rpx;
		/* #endif */
		/* #ifdef H5 */
		// padding-bottom: 40rpx;
		/* #endif */
	}

	.seelogs {
		width: 160rpx;
		height: 56rpx;
		background: rgba(255, 68, 46, 0);
		border: 1rpx solid #CCCCCC;
		border-radius: 28rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		text-align: center;
		line-height: 56rpx;
	}

	.zpbtnm {
		background-color: #f44336;
		font-size: 24rpx;
		color: #fff;
		padding: 6rpx 10rpx;
		border-radius: 6rpx;
		max-width: 68rpx;
	}
	.zbjtitle{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		padding-bottom: 28rpx;
	}
	.zbjkbtime{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
	.zbjjstime{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
</style>
